<template>
  <div class="annual-leave-apply">
    <el-card class="form-card" shadow="hover">
      <div slot="header" class="form-header">
        <span>年假申请</span>
      </div>

      <el-form
          :model="form"
          :rules="rules"
          ref="annualLeaveForm"
          label-position="top"
          label-width="120px">

        <!-- 年休假开始日期 -->
        <el-form-item label="年休假开始日期" prop="startDate">
          <el-date-picker
              v-model="form.startDate"
              type="date"
              placeholder="请选择开始日期"
              value-format="yyyy-MM-dd"
              :picker-options="dateOptions"
              style="width: 100%"
              clearable>
          </el-date-picker>
        </el-form-item>

        <!-- 年休假天数 -->
        <el-form-item label="年休假天数" prop="days">
          <el-input-number
              v-model="form.days"
              :min="1"
              :max="remainingDays"
              :step="1"
              controls-position="right"
              style="width: 200px"
              @change="validateDays">
          </el-input-number>
          <span class="tips">（剩余可用天数：{{ remainingDays }} 天）</span>
        </el-form-item>

        <!-- 审批人选择 -->
        <el-form-item label="审批人" prop="approverId">
          <el-select
              v-model="form.approverId"
              placeholder="请选择审批人"
              filterable
              style="width: 100%"
              clearable>
            <el-option
                v-for="approver in approvers"
                :key="approver.employee"
                :label="`${approver.employeeName}`"
                :value="`${approver.employeeId}`">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 新增备注字段 -->
        <el-form-item label="申请备注" prop="remarks">
          <el-input
              type="textarea"
              v-model="form.remarks"
              placeholder="请输入备注信息（可选）"
              :rows="3"
              maxlength="200"
              show-word-limit>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="submitForm"
              :loading="submitting">
            提交申请
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>



<script src="../../script/Annualleave/AnnualleaveApply.js"></script>

<style scoped>
/* 保持原有样式，新增备注样式 */
.tips {
  color: #67C23A;
  font-weight: 500;
}

.remarks-counter {
  position: absolute;
  right: 10px;
  bottom: 5px;
  font-size: 12px;
  color: #909399;
}
</style>